<template>
  <el-main>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" style="width: 1500px">
      <el-form-item label="查询日期">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="formInline.starttime" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="formInline.endtime" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick" style="width: 1000px">
        <el-tab-pane label="收入明细" name="first">
        </el-tab-pane>
        <el-tab-pane label="支出明细" name="second"></el-tab-pane>
      </el-tabs>
      <el-col>金额总计:{{this.formInline.total}}元</el-col>
      <el-col>
        押金(总计):{{this.formInline.deposit}} {{"\xa0\xa0"}}
        租金(总计):{{this.formInline.rent}} {{"\xa0\xa0"}}
        电费(总计):{{this.formInline.electricityFee}} {{"\xa0\xa0"}}
        水费(总计):{{this.formInline.waterFee}} {{"\xa0\xa0"}}
        宽带(总计):{{this.formInline.netFee}} {{"\xa0\xa0"}}
        燃气费(总计):{{this.formInline.gasFee}} {{"\xa0\xa0"}}
        有线电视(总计):{{this.formInline.cableFee}} {{"\xa0\xa0"}}
        其他(总计):{{this.formInline.otherFee}} {{"\xa0\xa0"}}
      </el-col>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="dealDate"
          label="交易时间">
        </el-table-column>
        <el-table-column
          prop="total"
          label="总计(元)">
        </el-table-column>
        <el-table-column
          prop="deposit"
          label="押金(元)">
        </el-table-column>
        <el-table-column
          prop="rent"
          label="租金(元)">
        </el-table-column>
        <el-table-column
          prop="electricityFee"
          label="电费(元)">
        </el-table-column>
        <el-table-column
          property="waterFee"
          prop="waterFee"
          label="水费(元)">
        </el-table-column>
        <el-table-column
          prop="netFee"
          label="宽带(元)">
        </el-table-column>
        <el-table-column
          prop="gasFee"
          label="燃气费(元)">
        </el-table-column>
        <el-table-column
          prop="cableFee"
          label="有线电视费(元)">
        </el-table-column>
        <el-table-column
          prop="otherFee"
          label="其他(元)">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick1(scope.row)" type="text" size="small">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="formInline.pageNum"
        :limit.sync="formInline.pageSize"
        @pagination="list"
      />
    </el-form>

    <el-dialog
      title="查看"
      :visible.sync="dialogVisible"
      width="100%"
      :before-close="handleClose">
      <span v-if="this.formIn.dealtype==2">交易时间:{{this.formIn.dealDate}},收入金额:{{this.formIn.total}}</span>
      <span v-if="this.formIn.dealtype==1">交易时间:{{this.formIn.dealDate}},收入金额:{{this.formIn.total}}</span>
      <el-table
        :data="tableData1"
        style="width: 100%">
        <el-table-column
          prop="dealDate"
          label="交易时间">
        </el-table-column>
        <el-table-column
          prop="roomName"
          label="房源名称">
        </el-table-column>
        <el-table-column
          prop="tenantName"
          label="租客姓名">
        </el-table-column>
        <el-table-column
          prop="tenantPhone"
          label="租客电话">
        </el-table-column>
        <el-table-column
          prop="itemType"
          label="费用类型">
          <span slot-scope="scope">
            <span v-if="scope.row.itemType==1">水费</span>
            <span v-if="scope.row.itemType==2">电费</span>
            <span v-if="scope.row.itemType==3">煤/燃气费</span>
            <span v-if="scope.row.itemType==80">租金</span>
            <span v-if="scope.row.itemType==81">押金</span>
            <span v-if="scope.row.itemType==90">解约结算</span>
            <span v-if="scope.row.itemType==99">其它</span>
          </span>
        </el-table-column>
        <el-table-column
          prop="dealDesc"
          label="收支状态">
        </el-table-column>
        <el-table-column
          prop="realPaymentAmount"
          label="金额(元)">
        </el-table-column>
        <el-table-column
          prop="payMethod"
          label="支付方式">
          <span slot-scope="scope">
            <span v-if="scope.row.payMethod==1">快捷同</span>
            <span v-if="scope.row.payMethod==2">支付宝</span>
            <span v-if="scope.row.payMethod==3">微信</span>
            <span v-if="scope.row.payMethod==4">现金</span>
            <span v-if="scope.row.payMethod==5">银行卡转账</span>
            <span v-if="scope.row.payMethod==6">POS机刷卡</span>
            <span v-if="scope.row.payMethod==99">其它</span>
          </span>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total1>0"
        :total="total1"
        :page.sync="formIn.pageNum"
        :limit.sync="formIn.pageSize"
        @pagination="list"
      />

      <span slot="footer" class="dialog-footer">
  </span>
    </el-dialog>

  </el-main>
</template>

<script>

import { cwDealPerDayList,sumList,shourumingxi,chaKanXinXiTongJi} from "@/api/finance/day"

export default {
  name: "index",
  data() {
    return {
      total1:0,
      formIn:{
        pageNum:1,
        pageSize:10,
        dealDate:null,
        total:0,
        dealtype:1,
        total1:0,
      },
      formInline: {
        starttime: null,
        endtime: null,
        pageNum:1,
        pageSize:10,
        operationType:1,
        total:0,//总金额
        deposit:0,//押金
        rent:'',//租金
        electricityFee:0,//电费
        waterFee:0,//水费
        netFee:0,//宽带
        gasFee:0,//燃气费
        cableFee:0,//有线电视
        otherFee:0,//其他
        dealtype:1,//初始化收入
        dealDate:null,//查看日期
      },
      activeName: 'first',
      tableData:[],
      total:0,
      dialogVisible:false,
      tableData1:[],
      columns:[
        {title:"交易时间",key:"dealDate"},
        {title:"总计(元)",key:"total"},
        {title:"押金(元)",key:"deposit"},
        {title:"租金(元)",key:"rent"},
        {title:"电费(元)",key:"electricityFee"},
        {title:"水费(元)",key:"waterFee"},
        {title:"宽带(元)",key:"netFee"},
        {title:"燃气费(元)",key:"gasFee"},
        {title:"有线电视费(元)",key:"cableFee"},
        {title:"其他(元)",key:"otherFee"},
      ],
      ExceData:[],
    }
  },
  methods: {
    toExcel(){
      if(this.activeName=='first'){
        this.formInline.operationType=1;
      }
      if(this.activeName=='second'){
        this.formInline.operationType=2;
      }
      cwDealPerDayList(this.formInline).then(res=>{
        console.log(res.data.records)
        res.data.records.forEach(r=>{
          this.ExceData.push(
            {dealDate:r.dealDate,total:r.total,rent:r.rent,electricityFee:r.electricityFee,netFee:r.netFee,gasFee:r.gasFee,cableFee:r.cableFee,otherFee:r.otherFee}
          )
        })
      })
    },
    /*收入明细列表*/
    handleClick1(row) {
      this.formIn.starttime=row.dealDate;
      if(this.activeName=='first'){
        this.formIn.dealtype=2;
      }
      if(this.activeName=='second'){
        this.formIn.dealtype=1;
      }
      shourumingxi(this.formIn).then(res=>{
        this.dialogVisible=true;
        console.log(res,"99999999999999999999")
        this.tableData1=res.data.records;
        this.formIn.total1=res.data.total;
        this.formIn.pageNum=res.data.current;
        this.formIn.size=res.data.size;
        console.log(this.formIn.total1)
      })

      this.formIn.dealDate=row.dealDate;
      chaKanXinXiTongJi(this.formIn).then(res=>{
        this.formIn=res.data;
        this.formIn.dealtype=res.data.dealtype;
      })
    },
    /*每页条数*/
    handleSizeChange(val) {
      this.formInline.pageSize=val;
      console.log(`每页 ${val} 条`);
      this.list();
    },
    /*当前页*/
    handleCurrentChange(val) {
      this.formInline.pageNum=val;
      console.log(`当前页: ${val}`);
      this.list();
    },
    /*每页条数*/
    handleSizeChange1(val) {
      this.formIn.size=val;
      console.log(`每页 ${val} 条`);
      this.handleClick1();
    },
    /*当前页*/
    handleCurrentChange1(val) {
      this.formIn.pageNum=val;
      console.log(`当前页: ${val}`);
      this.handleClick1();
    },
    /*模糊查询*/
    onSubmit() {
      this.list();
      this.sum();
    },
    /*tag标签*/
    handleClick(tab, event) {
      console.log(tab, event);
      this.list();
      this.sum();
    },
    /*列表*/
    list(){
      if(this.activeName=='first'){
        this.formInline.operationType=1;
      }
      if(this.activeName=='second'){
        this.formInline.operationType=2;
      }
      console.log(this.formInline)
      cwDealPerDayList(this.formInline).then(res=>{
        console.log(res.data)
        this.tableData=res.data;
        this.total=res.data.total;
      })
    },
    /*数据*/
    sum(){
      sumList(this.formInline).then(res=>{
        this.formInline.total=res.data.total;//总金额
        this.formInline.deposit=res.data.deposit;//押金
        this.formInline.rent=res.data.rent;//租金
        this.formInline.electricityFee=res.data.electricityFee;//电费
        this.formInline.waterFee=res.data.waterFee;//水费
        this.formInline.netFee=res.data.netFee;//宽带
        this.formInline.gasFee=res.data.gasFee;//燃气费
        this.formInline.cableFee=res.data.cableFee;//有线电视
        this.formInline.otherFee=res.data.otherFee;//其他
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
          this.list()
        })
        .catch(_ => {});
    }
  },
  created() {
    this.list();
  }
}
</script>

<style scoped>

</style>
